<template>
  <div>
    <div>
      <!-- <el-button @click="goBack">返回</el-button> -->
    </div>
    <div
      style="
        width: 70%;
        padding-top: 30px;
        margin-left: 10%;
        padding-bottom: 10px;
      "
    >
      <el-form ref="form" label-width="150px" :model="form" style="width: 50%">
        <el-form-item label="公司名称">
          <el-input v-model="form.company_name" placeholder="请输入公司名称" />
        </el-form-item>
        <el-form-item label="纳税人识别号">
          <el-input
            v-model="form.company_sn"
            placeholder="请输入纳税人识别号"
          />
        </el-form-item>
        <el-form-item label="法人/负责人">
          <el-input
            v-model="form.company_person"
            placeholder="请输入法人/负责人"
          />
        </el-form-item>
        <el-form-item label="营业执照">
          <el-upload
            action="https://devapi.jbkl.com/api/upload_img"
            class="avatar-uploader"
            :on-error="uploadImgErr"
            :on-success="uploadImgSuc"
            :show-file-list="false"
          >
            <!-- :before-upload="beforeUpload" -->

            <img
              v-if="imageUrl"
              class="avatar"
              :src="imageUrl"
              style="width: 100px; height: 100px"
            />
            <i
              v-else
              class="el-icon-plus avatar-uploader-icon"
              style="
                width: 100px;
                height: 100px;
                line-height: 100px;
                border: 1px solid #c0c4cc;
              "
            ></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="地址">
          <el-cascader
            v-model="baddress"
            :props="props"
            @change="cascaderChange"
          />
        </el-form-item>
        <el-form-item label="详细地址">
          <el-input
            v-model="form.company_address"
            placeholder="请输入详细地址"
          />
        </el-form-item>
        <el-form-item :label="langs.page.auto_task_reception">
          <!-- auto_task_reception -->
          <el-switch v-model="auto_task_reception" />
        </el-form-item>
        <el-form-item :label="langs.page.auto_task_deduction">
          <!-- <el-radio-group v-model="form.auto_task_deduction">
            <el-radio label="N">手动</el-radio>
            <el-radio label="Y">自动</el-radio>
          </el-radio-group> -->
          <el-switch v-model="auto_task_deduction" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">保存</el-button>
          <el-button @click="goBack">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  import { getArea } from '@/api/level'
  import { mechanismSettingEdit } from '@/api/mechanism'

  export default {
    components: {},
    props: {
      mcdata: {
        type: Object,
        required: true,
      },
    },
    data() {
      return {
        form: {
          company_name: '',
          company_license: '',
          company_sn: '',
          company_person: '',
          province_name: '',
          city_name: '',
          region_name: '',
          company_address: '',
          auto_task_deduction: '',
          auto_task_reception: '',
        },
        auto_task_reception: '',
        auto_task_deduction: '',
        imageUrl: '',
        baddress: '',
        langs: JSON.parse(window.localStorage.getItem('lang')),
        props: {
          lazy: true,
          lazyLoad(node, resolve) {
            const params = {
              pid: 0,
            }
            params.pid = node.value
            getArea(params).then((res) => {
              const arr = []
              res.data.forEach((e) => {
                arr.push({
                  value: e.id + '-' + e.name,
                  label: e.name,
                  leaf: e.level >= 3,
                })
              })
              resolve(arr)
            })
          },
        },
      }
    },
    watch: {},
    mounted() {
      this.form.city_name = this.mcdata.city_name
      this.form.company_address = this.mcdata.company_address
      this.form.company_name = this.mcdata.company_name
      this.imageUrl = this.mcdata.company_license
      this.form.company_license = this.mcdata.company_license
      this.form.company_sn = this.mcdata.company_sn
      this.form.company_person = this.mcdata.company_person
      this.form.auto_task_deduction = this.mcdata.auto_task_deduction
      if (this.mcdata.auto_task_deduction == 'Y') {
        this.auto_task_deduction = true
      } else {
        this.auto_task_deduction = false
      }
      this.form.auto_task_reception = this.mcdata.auto_task_reception
      if (this.mcdata.auto_task_reception == 'Y') {
        this.auto_task_reception = true
      } else {
        this.auto_task_reception = false
      }
      //
      this.form.city_id = this.mcdata.city_id
      this.form.city_name = this.mcdata.city_name
      this.form.province_id = this.mcdata.province_id
      this.form.province_name = this.mcdata.province_name
      this.form.region_name = this.mcdata.region_name
      this.form.region_id = this.mcdata.region_id

      this.baddress = [
        this.mcdata.province_id + '-' + this.mcdata.province_name,
        this.mcdata.city_id + '-' + this.mcdata.city_name,
        this.mcdata.region_id + '-' + this.mcdata.region_name,
      ]
    },
    created() {},
    methods: {
      onSubmit() {
        if (this.auto_task_deduction == true) {
          this.form.auto_task_deduction = 'Y'
        } else {
          this.form.auto_task_deduction = 'N'
        }
        if (this.auto_task_reception == true) {
          this.form.auto_task_reception = 'Y'
        } else {
          this.form.auto_task_reception = 'N'
        }
        mechanismSettingEdit(this.form).then(() => {
          this.goBack()
        })
      },
      cascaderChange(e) {
        const a = e[0].split('-')
        const b = e[1].split('-')
        const c = e[2].split('-')
        this.form.province_name = a[1]
        this.form.city_name = b[1]
        this.form.region_name = c[1]
        this.form.province_id = a[0]
        this.form.city_id = b[0]
        this.form.region_id = c[0]
      },
      uploadImgSuc(res, file) {
        this.form.company_license = res.data
        this.imageUrl = URL.createObjectURL(file.raw)
      },
      uploadImgErr() {},
      beforeUpload(file) {
        let _this = this
        const is1M = file.size / 1024 / 1024 < 1 // 限制小于1M
        const isSize = new Promise(function (resolve, reject) {
          let width = 100 // 限制图片尺寸为654X270
          let height = 100
          let _URL = window.URL || window.webkitURL
          let img = new Image()
          img.onload = function () {
            let valid = img.width === width && img.height === height
            valid ? resolve() : reject()
          }
          img.src = _URL.createObjectURL(file)
        }).then(
          () => {
            return file
          },
          () => {
            _this.$message.error('图片尺寸限制为100 x 100，大小不可超过1MB')
            return Promise.reject()
          }
        )
        if (!is1M) {
          _this.$message.error('图片尺寸限制为100 x 100，大小不可超过1MB')
        }
        return isSize & is1M
      },
      // 返回
      goBack() {
        this.$emit('showMain', 0)
      },
    },
  }
</script>

<style></style>
